<template>
  <page-content>
    <space class="my-0">
      <search-form 
        v-if="showSearch"
        :showSearch="showSearch" 
        :popover="false"
        :metaid="metaid"
        :fields="search"
      />
    </space>
    <br/>
    <space class="my-1">
      <option-form 
        :anySelected="!anySelected"
        :pass_delete="pass_delete"
        :pass_force_delete="pass_force_delete"
        :pass_restore="pass_restore"
        :pass_truncate="pass_force_delete"
        :selectedCount="selectedCount"
        :metaid="metaid"
        :selectedRowKeys="selectedRowKeys"
      />
    </space>

    <a-table
      row-key="id"
      :data-source="worshipArtists"
      :fixed="this.fixed"
      :scroll="{ x: this.width }"
      bordered
      :pagination="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template v-for="x in list">
        <a-table-column 
          v-if="x.type==CONFIG_TYPES.FILE" 
          :ellipsis="true" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <div style="display: flex; overflow-x: auto">
              <file-preview
                v-for="(item, index) of arrayWrap(record[x.field])"
                v-if="index<3" 
                :key="index"
                :file="item"
              />
            </div>
          </template>
        </a-table-column>
        <a-table-column 
          v-else-if="x.type==CONFIG_TYPES.MULTIPLE" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <span v-for="(item, index) of record[x.field]" :key="item">
              <template v-if="index > 0">
                <a-divider v-if="index < record[x.field].length+1" type="vertical" />
              </template>
              {{ item }}
            </span>
            <span 
              v-if="(record[x.field] || '').length > 3" 
              >...
            </span>
          </template>
        </a-table-column>
        <a-table-column 
          v-else-if="x.type==CONFIG_TYPES.EDITOR" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <doc-preview
              :title="x.label"
              :content="record[x.field]"
              :type="x.type"
            />
          </template>
        </a-table-column>
        <a-table-column 
          v-else-if="x.type==CONFIG_TYPES.TEXTAREA" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <doc-preview
              :title="x.label"
              :content="record[x.field]"
              :type="x.type"
            />
          </template>
        </a-table-column>
        <a-table-column 
          v-else-if="x.type==CONFIG_TYPES.DYNAMIC_INPUT" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <doc-preview
              :title="x.label"
              :content="record[x.field]"
              :type="x.type"
            />
          </template>
        </a-table-column>
        <a-table-column 
          v-else-if="x.type==CONFIG_TYPES.DYNAMIC_TEXTAREA" 
          :title="x.label" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        >
          <template #default="record">
            <doc-preview
              :title="x.label"
              :content="record[x.field]"
              :type="x.type"
            />
          </template>
        </a-table-column>
        <a-table-column 
          v-else 
          :title="x.label" 
          :data-index="x.field" 
          :width="x.list_width" 
          :fixed="x.list_fixed"
        />
      </template>
      <a-table-column 
        title="操作" 
        :width="200" 
        :fixed="this.fixed_right"
      >
        <template #default="record">
          <space>
            <router-link class="text-color" :to="`/worship-artists/${record.id}`">查看</router-link>
            <router-link v-if="!record.deleted_at && pass_put" :to="`/worship-artists/${record.id}/edit`">编辑</router-link>
            <lz-popconfirm v-if="!record.deleted_at && pass_delete" :confirm="destroyWorshipArtist(record.id)">
              <a class="error-color" href="javascript:void(0);">删除</a>
            </lz-popconfirm>
            <lz-popconfirm v-if="record.deleted_at && pass_restore" :confirm="restore(record.id)">
              <a class="success-color"  href="javascript:void(0);">恢复</a>
            </lz-popconfirm>
            <lz-popconfirm v-if="record.deleted_at && pass_force_delete" :confirm="forceDelete(record.id)">
              <a class="error-color"  href="javascript:void(0);">彻底删除</a>
            </lz-popconfirm>
          </space>
        </template>
      </a-table-column>
    </a-table>
    <lz-pagination :page="page"/>
  </page-content>
</template>

<script>
import LzPagination from '@c/LzPagination'
import LzPopconfirm from '@c/LzPopconfirm'
import PageContent from '@c/PageContent'
import SearchForm from '@c/SearchForm'
import OptionForm from '@c/OptionForm'
import Space from '@c/Space'
import {
  destroyWorshipArtist,
  getWorshipArtists,
} from '@/api/worship-artists'
import {arrayWrap, changeQuery, changeList, can} from '@/libs/utils'
import { mapConstants } from '@/libs/constants'
import FilePreview from '@c/FilePreview'
import DocPreview from '@c/DocPreview'
import {
  getListField,
  getSearchField,
} from '@/api/field'
import {restore, forceDelete} from '@/api/common'


export default {
  name: 'Index',
  scroll: true,
  components: {
    LzPopconfirm,
    PageContent,
    LzPagination,
    Space,
    SearchForm,
    OptionForm,
    FilePreview,
    DocPreview,
  },
  data() {
    return {
      showSearch:false,
      search: [],
      list: [],
      worshipArtists: [],
      page: null,
      width: 1200,
      fixed: false,
      fixed_right: false,
      metaid: this.$route.meta.id,
      selectedRowKeys: [],
    }
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
    anySelected() {
      return this.selectedCount > 0
    },
    selectedCount() {
      return this.selectedRowKeys.length
    },
    pass_put() {
      return can('pass-put-worship-artists')
    },
    pass_delete() {
      return can('pass-delete-worship-artists')
    },
    pass_restore() {
      return can('pass-restore')
    },
    pass_force_delete() {
      return can('pass-force-delete')
    },
  },
  methods: {
    arrayWrap,
    onRefresh() {
      this.$router.replace({
        path: this.$route.fullPath,
        query: {
          _refresh: Date.now(),
        },
      })
    },
    restore(id){
      return async () => {
        await restore(this.metaid, id)
        this.onRefresh()
      }
    },
    forceDelete(id){
      return async () => {
        await forceDelete(this.metaid, id)
        this.onRefresh()
      }
    },
    destroyWorshipArtist(id) {
      return async () => {
        await destroyWorshipArtist(id)
        this.onRefresh()
      }
    },
    async getSearchField(id) {
      const { data } = await getSearchField(id)
      this.search = data
      this.showSearch=true
    },
    async getListField(id) {
      const { data } = await getListField(id)
      this.list = data
    },
    async onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
  },
  watch: {
    $route: {
      async handler(newVal) {
        await this.getSearchField(this.$route.meta.id)
        await this.getListField(this.$route.meta.id)
        newVal = changeQuery(newVal)
        const { data: { data, meta } } = await getWorshipArtists(newVal.query)
        this.worshipArtists = data
        const { list,width } = changeList(this.list, data)
        this.list = list
        this.width = width
        this.page = meta
        if (width > 600) {
          this.fixed_right = 'right'
        }
        this.$scrollResolve()
      },
      immediate: true,
    },
  },
}
</script>
